 <template>
 	<uv-popup ref="popupRef" mode="center" bg-color="transparent" :overlay-style="{
      'background': `rgba(0, 0, 0, ${overlayOpacity})`,
      'backdrop-filter': 'blur(20px)',
      '-webkit-backdrop-filter': 'blur(20px)',
      '-webkit-filter': 'blur(20px)',
      '-moz-filter': 'blur(20px)',
      '-ms-filter': 'blur(20px)',
      '-o-filter': 'blur(20px)',
      'filter': 'blur(20px)',
      'transform': 'translateZ(0)',
    }" @mask-click="close">
 		<view class="popup-content relative">
 			<view class="box">
 				<image class="img_css"
 					src="https://part-cloud-1314961707.cos.ap-beijing.myqcloud.com/2023/10/24/20580d1cad1048db87762e9f7cdd7e58.png"
 					mode="aspectFill" />
 				<view class="b_center">
 					<view>
 						{{ title }}
 					</view>
 					<view>
 						<uParse v-if="desc" :content="desc" :userSelect="true" className=" " />
 					</view>
 				</view>
 			</view>
 			<button class="button" @click="close">
 				我知道了
 			</button>
 		</view>
 	</uv-popup>
 </template>


 <script>
 	export default {
 		props: {
 			title: {
 				type: String,
 				default: '该功能暂未开放',
 			},
 			desc: {
 				type: String,
 				default: '该功能暂未对当前身份进行开放，请选择其它功能进行使用',
 			},
 			overlayOpacity: {
 				type: Number,
 				default: 0.4,
 			},
 		},
 		data() {
 			return {

 			}
 		},
 		methods: {
 			open() {
 				this.$refs.popupRef.open('center')
 				this.$emit('onOpen')
 			},
 			close() {
 				this.$refs.popupRef.close()
 				this.$emit('onClose')
 			}
 		}
 	}
 </script>


 <style lang="scss" scoped>
 	.box {
 		width: 562rpx;
 		height: 488rpx;
 	}

 	.img_css {
 		width: 100%;
 		height: 100%;
 	}

 	.b_center {
 		font-size: 28rpx;
 		color: #333;
 		width: 500rpx;
 		position: absolute;
 		left: 32rpx;
 		top: 294rpx;
 	}

 	.b_center view:first-child {
 		width: 100%;
 		font-size: 36rpx;
 		font-weight: 600;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}

 	.b_center view:last-child {
 		width: 100%;
 		margin-top: 20rpx;
 		color: #666;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		text-align: center;
 	}

 	.button {
 		width: 322rpx;
 		height: 80rpx;
 		margin-top: 40rpx;
 		line-height: 80rpx;
 		border-radius: 60rpx;
 		display: flex;
 		flex-direction: column;
 		background: linear-gradient(282deg, #ff8f1f -3%, #ff1a01 99%);
 		font-size: 28rpx;
 		font-weight: 500;
 		letter-spacing: 0.1em;
 		color: #ffffff;
 	}
 </style>